<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	template="/templates/template_front_end.xhtml">
	<ui:insert name="header">
		<ui:include src="/pages/snippets/header_front_end.xhtml" />
	</ui:insert>
	<ui:define name="main">
		<h:form>
			<p:growl id="growl" sticky="true" showDetail="true" />

			<p:wizard showNavBar="false" widgetVar="wiz" flowListener="#{userWizard.onFlowProcess}" styleClass="pressf5_wizard">

				<p:tab id="personal" title="#{front_end_messages['wizard.personal']}">

					<p:panel header="Personal Details">

						<h:messages errorClass="error" />

						<h:panelGrid columns="2" columnClasses="label, value"
							styleClass="grid">
							<h:outputText value="name: *" />
							<p:inputText required="true" label="name"
								value="#{userWizard.user.name}" />

							<h:outputText value="surname: *" />
							<p:inputText required="true" label="surname"
								value="#{userWizard.user.surname}" />

							<h:outputText value="Age: " />
							<p:inputText value="#{userWizard.user.age}" />

							<h:outputText value="Skip to last: " />
							<h:selectBooleanCheckbox value="#{userWizard.skip}" />
						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="address" title="#{front_end_messages['wizard.address']}">
					<p:panel header="Adress Details">

						<h:messages errorClass="error" />

						<h:panelGrid columns="2" columnClasses="label, value">
							<h:outputText value="Street: " />
							<p:inputText value="#{userWizard.user.street}" />

							<h:outputText value="Postal Code: " />
							<p:inputText value="#{userWizard.user.postalCode}" />

							<h:outputText value="City: " />
							<p:inputText value="#{userWizard.user.city}" />

							<h:outputText value="Skip to last: " />
							<h:selectBooleanCheckbox value="#{userWizard.skip}" />
						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="contact" title="#{front_end_messages['wizard.contact']}">
					<p:panel header="Contact Information">

						<h:messages errorClass="error" />

						<h:panelGrid columns="2" columnClasses="label, value">
							<h:outputText value="Email: *" />
							<p:inputText required="true" label="Email"
								value="#{userWizard.user.email}" />

							<h:outputText value="Phone: " />
							<p:inputText value="#{userWizard.user.phone}" />

							<h:outputText value="Additional Info: " />
							<p:inputText value="#{userWizard.user.info}" />
						</h:panelGrid>
					</p:panel>
				</p:tab>

				<p:tab id="confirm" title="#{front_end_messages['wizard.confirm']}">
					<p:panel header="Confirmation">

						<h:panelGrid id="confirmation" columns="6">
							<h:outputText value="name: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.name}" />

							<h:outputText value="surname: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.surname}" />

							<h:outputText value="Age: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.age}" />
					
					<h:outputText value="Street: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.street}" />

							<h:outputText value="Postal Code: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.postalCode}" />

							<h:outputText value="City: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.city}" />

							<h:outputText value="Email: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.email}" />

							<h:outputText value="Phone " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.phone}" />

							<h:outputText value="Info: " />
							<h:outputText styleClass="outputLabel"
								value="#{userWizard.user.info}" />

							<h:outputText />
							<h:outputText />
						</h:panelGrid>

						<p:commandButton value="#{front_end_messages['wizard.submit']}" update="growl"
							actionListener="#{userWizard.save}" />
					</p:panel>
				</p:tab>
			</p:wizard>
			<div class="buttons">
				<p:commandButton value="#{front_end_messages['wizard.back']}" styleClass="regular"
					icon="pressf5" onclick="wiz.back();" />
				<p:commandButton value="#{front_end_messages['wizard.next']}" styleClass="regular"
					icon="pressf5" onclick="wiz.next();"/>
			</div>
		</h:form>
	</ui:define>
	<ui:insert name="left">
		<ui:include src="/pages/snippets/left_front_end.xhtml" />
	</ui:insert>
</ui:composition>